// plugin variables start
$postSignature: (
    primary: var(--themeColor),
    background: var(--color-basic-75),
    borderRadius: 2px,
);

$toolMenu: (
    background: var(--color-basic-50),
);

$donation: (
    btnColors: #10ac84,
    qrcodeBackground: var(--themeColor),
);

$footer: (
    background: #232323,
);

// $linemubers: (
//     color: var(--themeColor),
// );

$player: (
    bodyBackground: var(--color-basic-75),
);

$postBottomimage: (
    imageHeight: 200px,
);

$postMessage: (
    categoriesBackground: var(--themeColor),
    tagsBackground: #ff6b6b #fbc531 #22a6b3 #10ac84 #0097e6,
    tagsColor: var(--color-basic-800),
);

$progress: (
    background: var(--themeColor),
);

$signature: (
    padding: 1rem 14px,
    fontSize: 1em,
);

$chart: (
    padding: 0 13.884px 16px,
);

$emoji: (
    textEmojiColor: var(--color-basic-800),
    bg: var(--emoji-bg),
    borderColor: var(--color-basic-300),
    hoverBg: var(--color-basic-100),
    hoverBorderColor: var(--color-basic-200),
    fontEmojiSize: 16px,
);

#sidebar_news .custom-signature {
    padding-top: 0;
}

@import 'plugins/toolMenu/index.scss';
@import 'plugins/footer/index.scss';
@import 'plugins/themeColor/index.scss';
@import 'plugins/background/index.scss';
@import 'plugins/imagebox/index.scss';
@import 'plugins/live2d/index.scss';
@import 'plugins/player/index.scss';
@import 'plugins/clickEffect/index.scss';
@import 'plugins/copyCode/index.scss';
@import 'plugins/linenumbers/index.scss';
@import 'plugins/titleFavicon/index.scss';
@import 'plugins/commentsAvatars/index.scss';
@import 'plugins/signature/index.scss';
@import 'plugins/postSignature/index.scss';
@import 'plugins/highlight/index.scss';
@import 'plugins/postMessage/index.scss';
@import 'plugins/postTopimage/index.scss';
@import 'plugins/postBottomimage/index.scss';
@import 'plugins/emoji/index.scss';
@import 'plugins/lock/index.scss';
@import 'plugins/qrcode/index.scss';
@import 'plugins/chart/index.scss';
@import 'plugins/donation/index.scss';
@import 'plugins/barrage/index.scss';
@import 'plugins/mode/index.scss';
// plugin variables end

// catalog plugin start
#catalog {
    position: sticky;
    top: 60px;
    width: 15.5vw;
    font-size: 14px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 2px;
    margin-bottom: 16.2px;
    color: var(--color-basic-900);
    h3 {
        display: flex;
        align-items: center;
        padding: 10.098px 14.418px;
        background-color: var(--color-basic-50);
        border-bottom: 1px solid hsla(0, 0%, 59.2%, 0.1);
        .icon {
            width: 1.5em;
            height: 1.5em;
            margin-right: 5px;
        }
    }
    ul {
        background-color: var(--color-basic-50);
        max-height: 550px;
        padding: 10.098px 14.418px;
        overflow-y: scroll；;
        overflow-x: hidden;
        .h1-list {
            font-weight: 700;
        }
        .h1-list ~ .h2-list {
            margin-left: 1em;
            font-size: 14px;
            &::before {
                display: none;
            }
        }
        .h2-list ~ .h3-list {
            margin-left: 2em;
        }
        .h3-list ~ .h4-list {
            margin-left: 3em;
        }
        .h4-list ~ .h5-list {
            margin-left: 4em;
        }
        .h5-list ~ .h6-list {
            margin-left: 5em;
        }
        li {
            margin-top: 3.618px;
            a {
                display: inline-block;
                user-select: none;
                width: 100%;
                .icon {
                    width: 1.2em;
                    height: 1.8em;
                }
                &:hover {
                    text-decoration: none;
                }
            }
            &:hover {
                font-weight: bold;
            }
        }
    }
}

#catalog {
    &.catalog-scroll-up {
        top: 10px;
        transition: top 0.2s;
    }
}

@media screen and (max-width: 767px) {
    #catalog {
        display: none;
    }
}

.catalog-active {
    background: var(--themeColor);
    padding: 5.4px 5.4px;
    border-radius: 3px;
    transition: background 0.4s;
    color: var(--color-basic-50);
}

// .catalog-sticky {
//     position: fixed;
//     top: 64.8px;
//     visibility: visible;
//     transition: top 0.2s;
// }

// .catalog-sticky-left {
//     position: fixed;
//     top: 64.8px;
//     transition: top 0.2s;
// }

// .catalog-sticky-right {
//     position: fixed;
//     top: 64.8px;
//     right: 5vw;
//     transition: top 0.2s;
// }

// .catalog-scroll-down {
//     top: 64.8px;
//     transition: top 0.2s;
// }

// catalog plugin end

// drag menu start
@media screen and (max-width: 767px) {
    body .custom-drag-menu {
        right: 86px !important;
        bottom: 22px;
    }
}
// drag menu end
